<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="scripts/vue.js" type="text/javascript" charset="UTF-8"></script>
    <style>
        .header{
            width: 40px;height: 50px;
        }
    </style>
</head>
<body>
    <div id="app">   
        <ul>    
            <li v-for="item,key in students" :key="item.id">
                <h3 v-if="item.age%2==0">{{key}}---{{item.name}}:</h3>
                <h3 v-else>{{key}}---***:</h3>
                <h4>年龄:{{item.age}}</h4>
                <h4>头像地址:{{item.imgheader}}</h4>                
                <img :src="item.imgheader" class="header">
                <a @click="edit(item.id)" obj-id="">编辑</a>
            </li>
        </ul>

        
    </div>

    <script type="text/javascript">
    let app=new Vue({
        el:"#app",
        data:{
            students:[
                {
                    id:1,
                    name:"张三",
                    age:25,
                    imgheader:"https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4016333918,4269266815&fm=26&gp=0.jpg"
                },
                {
                    id:2,
                    name:"李四",
                    age:24,
                    imgheader:"https://dss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3743111107,1940472030&fm=111&gp=0.jpg"
                },
                {
                    id:3,
                    name:"王五",
                    age:23,
                    imgheader:"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4090061760,3566002114&fm=26&gp=0.jpg"
                },
                {
                    id:5,
                    name:"赵六",
                    age:22,
                    imgheader:"https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3256100974,305075936&fm=26&gp=0.jpg"
                },
                {
                    name:"孙琦",
                    age:21,
                    imgheader:"https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1306607258,967818222&fm=111&gp=0.jpg"
                }
        ]
        },
        methods:{
            edit:(id)=>{

                alert("对id="+id+"的数据进行编辑操作");
            }
        }
    });

    
    </script>
</body>
</html>